<template>
  <view
    class="artworks-item"
    @click="handleArtworks(artworksInfo)">
    <video
      id="myVideo"
      :src="artworksInfo.wx_cover_url || artworksInfo.cover_url"
      enable-danmu
      :danmu-btn="false"
      :controls="false"
      :show-center-play-btn="false"
      class="video-item"></video>
    <image
      src="@/static/image/play.png"
      mode="scaleToFill"
      class="play-icon"
    />
    <!-- 状态显示 -->
    <view v-if="artworksInfo.audit_status !== 'success'" class="show-status-container">
      <text v-if="artworksInfo.audit_status === 'review'">审核中</text>
      <text v-else-if="artworksInfo.audit_status === 'reject'">已拒绝</text>
    </view>
    <!-- 状态显示 -->
  </view>
</template>

<script>
export default {
  props: {
    artworksInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {
    handleArtworks() {
      if (this.artworksInfo.audit_status === 'success') {
        this.$emit('handleArtworks', this.artworksInfo);
      }
    }
  }
}
</script>

<style lang="scss">
  .artworks-item{
    width: 100%;
    height: 376rpx;
    margin-bottom: 24rpx;
    position: relative;
    border-radius: 8rpx;
    overflow: hidden;
    background: rgba($color: #000, $alpha: .2);
    padding: 6rpx;

    .video-item{
      width: 208rpx;
      height: 364rpx;
      border-radius: 10rpx;
      margin: auto;
      display: block;
    }

    .show-status-container{
      background: #000;
      color: #fff;
      width: 100%;
      height: 100%;
      z-index: 999;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }

    .play-icon{
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border-radius: 50%;
      background: rgba($color: #000000, $alpha: .5);
    }
  }
</style>
